<html>
<head>
<#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
<#include "/WEB-INF/views/template/bootMainCss.ftl" parse=true encoding="utf-8">
    <!-- bootstrap-datetimepicker -->
    <link href="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"
          rel="stylesheet">
    <style>
        #tbodyId td button{ margin-bottom: 3px;}
    </style>
</head>
<body>
<input id="p_update" style="display: none" value="1">
<input id="p_update_status" style="display: none" value="1">
<input id="p_view" style="display: none" value="1">
<input id="p_role_update" style="display: none" value="1">
<input id="p_resetPwd" style="display: none" value="1">
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-12">
                        <!--判断是否用户列表-->
                        <input type="hidden" id="userList" value="1">
                        <input type="hidden" id="memberId" value="">
                        <form id="myForm">
                            <div class="row">
                                <div class="col-xs-2">
                                    <div class="input-group">
                                        <span class="input-group-addon">姓名</span>
                                        <input type="text" class="form-control" id="realName">
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="input-group">
                                        <span class="input-group-addon">登录名</span>
                                        <input type="text" class="form-control" id="loginName">
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="input-group">
                                        <span class="input-group-addon">手机号</span>
                                        <input type="text" class="form-control" id="phone">
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <div class="input-group">
                                        <span class="input-group-addon">账号状态</span>
                                        <select class="form-control" id="state">
                                            <option value="">全部</option>
                                            <option value="0">正常</option>
                                            <option value="1">登录锁定</option>
                                            <option value="2">系统锁定</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <div class="row">
                                <div class="col-xs-2">
                                    <div class="input-group">
                                        <span class="input-group-addon">工号</span>
                                        <input type="text" class="form-control" id="jobNumber">
                                    </div>
                                </div>
                                <div class="col-xs-2">
                                    <button type="button" class="btn btn-primary btn-sm" onclick="search(1)">查询</button>
                                    <button type="button" class="btn btn-primary btn-sm"
                                            onclick="$('#myForm')[0].reset();">重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="panel-heading">
                <button type="button" class="btn btn-primary" onclick="addUser();">新增</button>
            </div>

            <div class="panel-body panel-white">
                <div class="table-responsive">
                    <table id="myTable"
                           class="table table-striped table-bordered table-hover"
                           data-url="${basePath}/admin/manager/json"
                           data-pageSize="10,50,100" data-method="GET">
                        <thead>
                        <tr>
                            <th width="5%" data-field="id">ID</th>
                            <th width="9%" data-field="loginName">登录名</th>
                            <th width="13%" data-field="realName">姓名</th>
                            <th width="8%" data-field="sex" data-call="true">性别</th>
                            <th width="10%" data-field="phone">手机号码</th>
                            <th width="10%" data-field="jobNumber">工号</th>
                            <th width="10%" data-field="email">邮箱</th>
                            <th width="5%" data-field="state" data-call="true">状态</th>
                            <th width="5%" data-field="loginCount">登录次数</th>
                            <th width="12%" data-field="lastVisit" data-call="true">最后一次访问时间</th>
                            <th width="23%" data-field="button" data-call="true">操作</th>
                        </tr>
                        </thead>
                        <tbody id="tbodyId">
                        </tbody>
                    </table>
                </div>
                <div class="row">
                    <div align="left" class="col-xs-6">
                        <div class="input-group">
                            <span class="input-group-addon" id="pageCount"></span> <select
                                id="pageSize" onchange="search(1)" class="form-control"
                                style="width: 100px"></select>
                        </div>
                    </div>
                    <div align="right" class="col-xs-6">
                        <ul class="pagination" id="pagination"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<#include "/WEB-INF/views/template/bootMainJs.ftl" parse=true encoding="utf-8">
<script type="text/javascript" src="${basePath}/bootstrap/js/utils.js" type="text/javascript"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/jqPaginator.js"></script>
<script type="text/javascript" src="${basePath}/bootstrap/plugin/jqPaginator/myPage.js"></script>
<!-- bootstrap-datetimepicker -->
<script type="text/javascript"
        src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript"
        src="${basePath}/bootstrap/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
    $(function () {
        $('#start_visit_time').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
            autoclose: true //选择日期后自动关闭
        });
        $('#end_visit_time').datetimepicker({
            minView: "month", //选择日期后，不会再跳转去选择时分秒
            format: "yyyy-mm-dd", //选择日期后，文本框显示的日期格式
            language: 'zh-CN', //汉化
            autoclose: true //选择日期后自动关闭
        });
    });


    function tableCallBack(data, id) {
        if (id == 'sex') {
            if (data[id] == 0) {
                return '女';
            } else if (data[id] == 1) {
                return '男';
            } else if (data[id] == 2) {
                return '超级管理员';
            }
        }
        if (id == 'state') {
            if (data[id] == '0') {
                return '正常';
            } else if (data[id] == '1') {
                return '登录锁定';
            } else if (data[id] == '2') {
                return '系统锁定';
            } else {
                return data[id];
            }
        } else if (id == 'button') {
            var _button = '';
            var count = 0;
            if ($('#p_view').val() == 1) {
                _button += '<button type="button" class="btn btn-primary btn-xs" onclick="viewUser(' + data.id + ');">查看</button> ';
                count++
            }
            if ($('#p_update').val() == 1) {
                _button += '<button type="button" class="btn btn-primary btn-xs" onclick="editUser(' + data.id + ');">编辑</button> ';
                count++;
            }

            if ($('#p_role_update').val() == 1) {
                _button += '<button type="button" class="btn btn-primary btn-xs" onclick="editUserRole(' + data.id + ');"> 修改权限 </button> ';
                count++
            }

            if ($('#p_resetPwd').val() == 1) {
                _button += '<button type="button" class="btn btn-danger btn-xs" onclick="editUserId(' + data.id + ');"> 绑定上级 </button> ';
                count++
            }

            if ($('#p_update_status').val() == 1) {
                if (data.state == '0') {
                    _button += '<button type="button" class="btn btn-danger btn-xs" onclick="editStatus(\'' + data.id + '\',\'2\');">删除</button> ';
                }
                else {
                    _button += '<button type="button" class="btn btn-danger btn-xs" onclick="editStatus(\'' + data.id + '\',\'0\');">启用</button> ';
                }
                count++;
            }
            if (data.sex == '2') {
                _button = _button.replace(new RegExp('btn-xs', 'gm'), 'btn-xs disabled');
                _button = _button.replace(new RegExp("onclick", 'gm'), 'unonclick');
            }

            return _button;
        } else {
            if (data[id] == null || data[id] == '') {
                return '';
            } else {
                return data[id];
            }
        }
    }

    function viewUser(id) {
        layer.open({
            type: 2,
            area: ['900px', '80%'],
            offset: [100, (($(window).width() - 900) / 2)],
            title: '查看后台用户信息',
            content: ['${basePath}/admin/manager/view/' + id + '?state=0', 'yes']
        });
    }


    function addUser() {
        layer.open({
            type: 2,
            area: ['90%', '90%'],
            title: '新增用户',
            content: ['${basePath}/admin/manager/create', 'yes'],
            end: function(){
                search(parseInt($('.active').attr('jp-data')));
            }
        });
    }

    function editUser(id) {
        layer.open({
            type: 2,
            area: ['90%', '90%'],
            title: '修改后台用户信息',
            content: ['${basePath}/admin/manager/update/' + id + '?state=0', 'yes'],
            end: function(){
                search(parseInt($('.active').attr('jp-data')));
            }
        });
    }

    function editUserId(id) {
        $("#memberId").val(id)
        layer.open({
            type: 2,
            area: ['900px', '80%'],
            title: '绑定上级',
            content: ['${basePath}/admin/manager/userPermission', 'yes']
        });


    }

    function editUserRole(id) {
        layer.open({
            type: 2,
            area: ['900px', '80%'],
            offset: [100, (($(window).width() - 900) / 2)],
            title: '分配后台用户角色权限',
            content: ['${basePath}/admin/manager/roleUpdate?id=' + id, 'no'],
            end: function(){
                search(parseInt($('.active').attr('jp-data')));
            }
        });
    }

    function editStatus(id, state) {
        //询问框
        layer.confirm('是否确定此操作？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.ajax({
                url: '${basePath}/admin/manager/updateStatus',
                dataType: 'json',
                type: 'POST',
                data: {
                    id: id,
                    state: state
                },
                success: function (data) {
                    if (data.code == '0000' || data.code == '0') {
                        layer.closeAll('dialog');
                        search(parseInt($('.active').attr('jp-data')));
                    } else {
                        layer.alert(data.desc, {icon: 5});
                    }
                },
                error: function () {
                    layer.alert('系统错误', {icon: 5});
                }
            });
        }, function () {

        });
    }
</script>
</body>
</html>